import {
  createInbizSchema,
  createBaseSchema,
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createSoureSchema,
  createComponentLayout,
  createControllerSchema,
} from '@inbiz/setters';
import { createBehavior, createResource } from '@inbiz/core';
import { TimeLine as LocaleTimeLine } from './locale';
import ConfigDialog from './components/ConfigModal';
import { Field } from '@formily/core';

/**
 * 1.属性的默认值:defaultProps
 * 2.属性的json数据
 * */

export const defaultProps = {
  id: '',
  prefixCls: 'inbiz-TimeLine',
  mode: 'left',
  mode2: 'top',
  activedTime: 2,
  reverse: false,
  contentCard: false,
  timeLeft: false,
  arrangement: 'crosswise',
  configData: {
    source: 1,
    tableData: [],
    formValue: {},
    sourceModel: '',
  },
  filterExpired: false,
};

// Shema
export const propsSchema = createInbizSchema({
  attribute: {
    ...createBaseSchema(
      {
        arrangement: {
          type: 'string',
          enum: ['crosswise', 'lengthways'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
        },
        mode: {
          type: 'string',
          enum: ['right', 'left'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-reactions': {
            dependencies: ['.arrangement'],
            fulfill: {
              state: {
                hidden: "{{$deps[0] == 'crosswise'}}",
              },
            },
          },
        },
        mode2: {
          type: 'string',
          enum: ['top', 'bottom'],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
          'x-reactions': {
            dependencies: ['.arrangement'],
            fulfill: {
              state: {
                hidden: "{{$deps[0] == 'lengthways'}}",
              },
            },
          },
        },
        /* timeLeft: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          checkedChildren: '开启',
          unCheckedChildren: '关闭',
        },
      },
      contentCard: {
        type: 'boolean',
        'x-decorator': 'FormItem',
        'x-component': 'Switch',
        'x-component-props': {
          checkedChildren: '开启',
          unCheckedChildren: '关闭',
        },
      }, */
        reverse: {
          type: 'boolean',
          enum: [false, true],
          'x-decorator': 'FormItem',
          'x-component': 'Select',
        },
        filterExpired: {
          type: 'boolean',
          'x-decorator': 'FormItem',
          'x-component': 'Switch',
        },
        configData: {
          type: 'object',
          'x-decorator': 'FormItem',
          'x-component': (props) => {
            // console.log(useForm(), useField())
            // window.formu = useForm()
            return <ConfigDialog {...props} />;
          },
        },
      },
      undefined,
      true,
    ),
  },
  
  style: {
    ...createComponentStyleSchema(),
    ...createComponentLayout(),
    ...createDecoratorStyleSchema(),
  },
  senior: {
    // ...createModelSchema(),
    ...createSoureSchema({
      fieldChange: (form, value) => {
        const configData = form.query(/configData$/).take() as Field;
        // let modelName: string;
        const list = value?.queryField?.map((item) => {
          // if (item.Master) {
          //   modelName = item.ModelName ? item.ModelName : '';
          // }
          return (
            item.FieldName?.split('$')[1] +
            '$' +
            (item.AnotherName ? item.AnotherName : item.FieldName?.split('$')[1])
          );
          // return item.AnotherName ? modelName+'$'+item.AnotherName : item.FieldName;
        });

        // 当配置的动态数据中的 “时间” 或  “节点内容”  中的一个字段匹配不上，直接触发清空配置
        let flag1 = list?.indexOf(configData?.value.formValue?.timeKey) === -1;
        let flag2 =
          configData?.value.formValue?.contentKey?.filter((item: any) => {
            return list?.indexOf(configData?.value.formValue?.timeKey) === -1;
          })?.length > 0;

        list?.indexOf(configData?.value.formValue?.contentKey?.[0].value) === -1 ||
          list?.indexOf(configData?.value.formValue?.timeKey) === -1;

        if (flag1 || flag2) {
          configData.value.formValue = {};
          configData.value.source = 1;
          configData.setValue(configData.value);
        }
      },
    }),
  },
  controller: createControllerSchema({
    events: [
    {
      name: "onParamFormat",
      label: "格式化参数",
      isConfigEvent: true,
      platform: 'web'
    },
    {
      name: "onRequest",
      label: "自定义请求",
      isConfigEvent: true,
      platform: 'web'
    },
    {
      name: "onData",
      label: "格式化数据",
      isConfigEvent: true,
      platform: 'web'
    }]
  })
});

export const Behavior = createBehavior({
  extends: ['Field'],
  name: 'TimeLine',
  selector: (node) => node.props?.['x-component'] === 'TimeLine',
  designerLocales: LocaleTimeLine,
  designerProps: { propsSchema },
});

export const Resource = createResource({
  icon: 'Timeline',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'sting',
        title: {
          value: 'TimeLine.title',
          status: true,
        },
        'x-component': 'TimeLine',
        'x-decorator': 'FormItem',
        'x-component-props': defaultProps,
      },
    },
  ],
});
